<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <script src="/static/script/jquery-1.7.2.js"></script>
    <script>
        $(function (){
                //给注册按钮绑定单击事件
                $("#sub_btn").click(function(){
                    //获取用户输入的用户名
                    var username = $("#username").val();
                    //设置验证用户名的正则表达式
                    var usernameReg = /^[a-zA-Z0-9_-]{3,16}$/;
                    //验证是否符合规则
                    var flag = usernameReg.test(username);
                    if(!flag){
                        alert("请输入3-16位的字母、数字、下划线或减号的用户名！");
                        return false;
                    }
                    //获取用户输入的密码
                    var password = $("#password").val();
                    //设置验证密码的正则表达式
                    var passwordReg = /^[a-zA-Z0-9_-]{6,18}$/;
                    if(!passwordReg.test(password)){
                        alert("请输入6-18位的字母、数字、下划线或减号的密码！")
                        return false;
                    }
                    //获取用户输入的确认密码
                    var repwd = $("#repwd").val();
                    if(repwd == ""){
                        alert("确认密码不能为空！");
                        return false;
                    }
                    //判断两次输入的密码是否一致
                    if(repwd != password){
                        //将确认密码清空，即将确认密码密码框中的value属性设置为空
                        $("#repwd").val("");
                        alert("两次输入的密码不一致！");
                        return false;
                    }
                    //获取用户输入的邮箱
                    var phoneNum = $("#phoneNum").val();
                    //设置验证邮箱的正则表达式
                    var phoneNumReg = /^[0-9]{11}$/;
                    if(!phoneNumReg.test(phoneNum)){
                        alert("手机号不正确！");
                        return false;
                    }

                });
                //将显示错误提示信息的span标签隐藏
                $("#msg").hide();
                if("{{.}}"=="用户名已存在！"){
                    $("#msg").show();
                }

                //发送Ajax请求验证用户名是否存在
                //给输入用户名的文本框绑定change事件
                $("#username").change(function(){
                    //获取用户输入的用户名
                    var username = $(this).val();
                    //设置请求地址
                    var url = "/checkUserName";
                    //设置请求参数
                    var param = {"username":username};
                    //发送Ajax请求
                    $.post(url,param,function(res){
                        //将显示提示信息的span元素显示
                        $("#msg").show();
                        //将响应信息设置到span元素中
                        $("#msg").html(res);
                    });
                });
        });
    </script>
</head>
<body>
<div id="login_page">
    <div class="logo"><img alt="" src="/static/img/logo.png" style="width: 50px;height: 50px"> 猫眼电影</div>
    <div id="content">
        <div class="picture"><img src="/static/img/3.jpg" style="width: 320px;height: 400px"></div>

        <div class="form" style="margin-top: 2px;padding-bottom:30px">
            <form action="/register" method="post">
                <div class="errorMsg" id="msg" style="color: red">{{.}}</div>
                <label>用户名称：</label>
                <input class="itxt" type="text" placeholder="请输入用户名" autocomplete="off" tabindex="1" name="username" id="username" />
                <br />
                <br />
                <label>用户密码：</label>
                <input class="itxt" type="password" placeholder="请输入密码" autocomplete="off" tabindex="1" name="password" id="password" />
                <br />
                <br />
                <label>确认密码：</label>
                <input class="itxt" type="password" placeholder="确认密码" autocomplete="off" tabindex="1" name="repwd" id="repwd" />
                <br />
                <br />
                <label>手机号码：</label>
                <input class="itxt" type="text" placeholder="请输入手机号码" autocomplete="off" tabindex="1" name="phoneNum" id="phoneNum" />
                <br />
                <br />
                <br />
                <input type="submit" value="注册" id="sub_btn" />
            </form>
        </div>
    </div>
</div>
</body>
</html>